<template>
    <div class="qr_code">
        <div v-title :data-title="text">{{text}}</div>
        <code-Header :text="text"></code-Header>
        <div class="content clearfix" v-if="data">
            <p class="title">推荐码: &nbsp;{{data.id}}</p>
            <p class="title">&nbsp;</p>
            <p class="title">推荐链接: &nbsp;</p>
            <div class="copy clearfix">
                <input class="text-single-hidden url fl" v-model="message"/>
                <button class="copy_btn fl" type="button"
                    v-clipboard:copy="message"
                    v-clipboard:success="onCopy"
                    v-clipboard:error="onError">复制
                </button>
            </div>
            <div class="code_img">
                <p>您的推荐二维码</p>
                <img :src="url+data.path" alt=""/>
            </div>
        </div>
        <div class="wu" v-if="!data">
            <li>您暂时没有推荐分销权限，想申请为分销商，请按以下步骤进行:</li>
            <li>一、在本商场下单3960元以上并留言“我要分销”；</li>
            <li>二、客服受理，分配推荐权限。</li>
            <li>备注:1、此笔下单金额及以后都享受批发价;2、你的下单和申请，公司视为:你已同意和接受公司的相关管理规章制度！</li>
            
        </div>
        <div class="load-wrap" v-show="load_wrap" @touchmove.prevent><mt-spinner type="triple-bounce" color="rgb(38, 162, 255)"></mt-spinner></div>
    </div>
</template>
<script>
    import codeHeader from './children/header.vue';
    import {Toast } from 'mint-ui';
    import qs from 'qs';
    export default {
        name: 'qr_code',
        data() {
            return {
                message:'',
                load_wrap: true,
                text:'你的推荐信息',
                data:'',
                show:'',
                url:'',
                scrollWatch:true
            }
        },
        created(){
            this.axios.post(API_URL + 'Home/Pcenter/QrCode',qs.stringify({
                app_user_id:sessionStorage.getItem('user_ID')
            })).then((res) => {
                Toast(res.data.msg);
                if(res.data.status == 1){
                    this.data = res.data.data;
                    this.message = res.data.data.url;
                    this.load_wrap = false;
                }else{
                    console.log(res)
                    this.show = res.data.msg;
                    this.load_wrap = false;
                }
                
            }).catch((err) => {
                console.log(err)
            });
        },
        mounted() {
            document.body.scrollTop = 0;
            this.url= window.API_URL;
        },
        destroyed(){
            this.scrollWatch = false;
        },
        methods:{
            onCopy (e) {
                Toast('复制成功');
            },
            onError (e) {
                Toast('复制错误,请手动复制')
            },
        },
        components:{
            codeHeader
        },
    }
</script>
<style lang="less" scoped>
    .qr_code{
        .content{
            padding:.6rem .2rem;
            span{
                font-size: .25rem;
            }
            .title {
                margin: 0 0 10px;
                font-size: .3rem;
                font-weight: 800;
            }
            .copy {
                padding-bottom: 1.3rem;
                .url {
                    width:5.5rem;
                }
                .copy_btn {
                    font-size: .25rem;
                    margin-left:.4rem;
                    font-weight: 800;
                }
            }
            .code_img {
                text-align: center;
                p{
                    margin: 0 0 10px;
                    text-align: left;
                    font-size: .3rem;
                    font-weight: 800;
                }
                img{
                    margin:0 auto;
                  width: 4rem;
                  height:4rem;
                }
            }

        }
        .wu {
            padding-top: 0.5rem;
            font-size: .3rem;
            margin-left:.4rem;
            font-weight: 800;
            color : 7F7A7A ;
            li{
                padding: .05rem;
            }
        }
    }
</style>